import { VueComponent,Prop } from 'vue-typescript'
import * as VueRouter from 'vue-router'
import {dataService} from '../../service/dataService'

var VuePagination = require('v-pagination');
Vue.use(VuePagination)

interface JQuery {
    bootstrapTable(options?: any): JQuery;
    bootstrapTable(name:string,any):JQuery;
}
declare var bootstrapTable: JQueryStatic;

Vue.use(VueRouter);
var router = new VueRouter();

var VueTables = require('vue-tables');
Vue.use(VueTables.client,{
    filterable:false,
    compileTemplates:true
});



@VueComponent({
    template: require('./orderReleaseManage.html')
})

 export class OrderReleaseManageComponent extends Vue {
    el:'#orderRelease'
    components:{
       orderReleaseManageTable:any
    }

    /**
     * 订单状态下拉
     */
    orderStatusList = [
        {"text":"未处理",value:0},
        {"text":"已处理",value:1},
        {"text":"订单终结",value:2},

    ]

    //v-model初始化
    @Prop
    
    searchingOrderId:string='';
    searchingStartAddress:string='';
    searchingEndAddress:string='';
    searchingStartTime:string='';
    searchingEndTime:string='';
    searchingOrderStatus ='';

    Records=1
    PerPage=10
    

    columns=['orderId','startAddress','endAddress','goodsName','goodsNum','carLength','releaseTime','urgentTime','orderStatus','operation']
    ready=function(){
        //删除分页里的总行数统计（英文的）
        $('p').remove(".VuePagination__count")

        this.$on('vue-pagination::table', function(page) {
            this.table1Page = page;	//当前页数
            console.info(page)
            this.load(this.searchingOrderId,this.searchingOrderStatus,this.searchingStartTime,this.searchingEndTime,this.searchingStartAddress,this.searchingEndAddress,(page-1)*this.count,this.count);
        });

        $('#ApplicationStartTime').datetimepicker({format:  'YYYY.MM.DD HH:mm'});
        $('#ApplicationEndTime').datetimepicker({format:  'YYYY.MM.DD HH:mm'});

        var $table = $('#table').bootstrapTable({
            // url: "index.php",//数据源
                dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
                // height: tableHeight(),
                clickToSelect:true, //选中的数据增加样式
                singleSelect:true,  //选中数据
                pagination: true,//是否分页
                pageSize: 10,//单页记录数
                pageList: [10, 20, 30],//分页步进值
                sidePagination: "client",//服务端分页
                buttonsAlign: "left",//按钮对齐方式 子询价编号 发货地址 送货地址 货物名称 货物数量 所需车长 询价时间 紧急程度 询价状态
                columns: [
                    {field: "select",title: "全选",checkbox: true,width: 20,align: "center",valign: "middle"},
                    {field: "cspOrderId",title: "订单编号", sortable: true,order: "desc"},
                    {field: "startAddress",title: "发货地址",sortable: true,titleTooltip: "this is name"},
                    {field: "endAddress",title: "送货地址",sortable: true,},
                    {field: "goodsName",title: "货物名称",sortable: true,},
                    {field: "goodsNum",title: "货物数量",sortable: true,},
                    {field: "carLength",title: "所需车长",sortable: true,},
                    {field: "cspOrderTime",title: "发货发布时间",sortable: true,},
                    {field: "responseTime",title: "紧急程度",sortable: true,},
                    {field: "status",title: "订单状态",sortable: true,},

                    {
                        field: 'template',
                        title: '操作',
                        formatter: function operateFormatter(value, row, index) {
                            // Chris=='待处理' Dan=="已处理"
                            var aa=`<a title='终结订单' class="endOrder"><i class='glyphicon glyphicon-minus-sign text-primary m-l-xs'></i></a>`;
                            var bb=`<a class="detailOrder" href='#!/order/orderReleaseDetail/?id=${row.id}&status=${row.status}&name=1'/detail' title="查看详情"><i class='glyphicon glyphicon-eye-open text-info m-l-xs'></i></a>`;
                            var cc=`<a href='#!/order/orderReleaseDetail/?id=${row.id}&status=${row.status}&name=edit' title='跳转'><i class='glyphicon glyphicon-edit text-info m-l-xs'></i></a>`;
                            var dd=`<a class='glyphicon glyphicon-trash remove text-danger m-l-xs' title='删除'href='javascript:void(0);'></a>`;
                            switch(row.status){
                                case'未处理':return aa+``+bb+``+dd;
                                case'已处理':return cc;
                                default:return bb;
                            }
                            
                        },
                        events: {
                            //订单终结
                            'click .endOrder': (e, value, row, index) =>{
                                bootbox.confirm("是否终结该订单!",(result)=>{
                                    if(result){
                                        dataService().CspOrder.editCspOrder(row.id).then((res)=>{
                                            //this.load(this.searchingOrderId,this.searchingOrderStatus,this.searchingStartTime,this.searchingEndTime,this.searchingStartAddress,this.searchingEndAddress,this.skip,this.count);
                                            this.$refs.table.setPage(1);
                                        });
                                    }else{
                                        return;
                                    }
                                });
                            },
                            //查看详情
                            'click .detailOrder':(e,value,row,index)=>{
                                 router.go('orderReleaseDetail/?id='+row.id+'&name=detail');
                            },

                            'click .remove':(e,value,row,index)=>{
                                bootbox.confirm("是否删除订单!",(result)=>{
                                    if(result){
                                        dataService().CspOrder.deleteCspOrder(row.id).then((res)=>{
                                            //this.load(this.searchingOrderId,this.searchingOrderStatus,this.searchingStartTime,this.searchingEndTime,this.searchingStartAddress,this.searchingEndAddress,this.skip,this.count);
                                            this.$refs.table.setPage(1);
                                        });
                                    }else{
                                        return;
                                    }
                                })
                            },
                        },
                    }
                ],
                data: [],
                onClickRow: function(row, $element) {
                    //$element是当前tr的jquery对象
                    // $element.css("background-color", "green");
                },//单击row事件
                actionFormatter:function(value, row, index){
                    console.info('tyv')
                },
                locale: "zh-CN"//中文支持,
        });
        //表格 初始 加载数据
        this.load(this.searchingOrderId,this.searchingOrderStatus,this.searchingStartTime,this.searchingEndTime,this.searchingStartAddress,this.searchingEndAddress,this.skip,this.count);
    }

    @Prop
    skip=0;
    count=10;
    seeks = true;

    //请求数据
    load = function(orderId,orderStatus,startTime,endTime,startAddress,endAddress,skip,count){
        dataService().CspOrder.getCspOrderList(orderId,orderStatus,startTime,endTime,startAddress,endAddress,skip,count).then((res)=>{            
            $('#table').bootstrapTable('load', res.data);
            this.seeks=false;
            this.Records = res.total==0?0.5:res.total;
        },function(rej){
            this.seeks = false;
        });
    }

  
    //查询调用
    queryUsers= function(){
       this.seeks=true;
       //this.load(this.searchingOrderId,this.searchingOrderStatus,this.searchingStartTime,this.searchingEndTime,this.searchingStartAddress,this.searchingEndAddress,this.skip,this.count);
       this.$refs.table.setPage(1);
    }

    //跳转到订单新增页面
    LinkToOrderReleaseAdd=()=>{
        //console.info('rt:',$('#table').bootstrapTable('getSelections'));
        var rowSelected;
        rowSelected=$('#table').bootstrapTable('getSelections')[0];
        if(rowSelected){
            router.go('orderReleaseAdd/?id='+ rowSelected.id+'&name=copy');
        }else{
            router.go('orderReleaseAdd/?id='+'&name=add');
        }
    }



 }

  